<template>
	<view>
		<!-- Search Navigation -->
		<view class="Search-Navigation">
			<i class="return-icon" @click="goBack"></i>
			<view class="search-box">
				<i class="search-icon"></i>
				<u-input placeholder="请输入内容" border="surround" :clearable="true" @input="handleInput"></u-input>
				<i class="camera-icon"></i>
			</view>
		</view>
		<view class="Search-Navigation-backgeound"></view>
		<view class="screen-background">
			<view class="classification-background">
				<u-tabs class="custom-tabs" :list="list1" lineColor="#f72647" lineWidth="60rpx" lineHeight="5rpx"
					:activeStyle="{ color:'#323232', fontWeight:'600' }"
					:inactiveStyle="{ color:'#8b8b8b', fontSize:'30rpx' }" @click="click">
				</u-tabs>
			</view>
		</view>

		<view class="Specific-products-bcskground">
			<view class="Product-details-background" v-for="(item, index) in asd" :key="index" @click="toggleIcon(index)">
				<template v-if="currentTab === '全部'">
					<view class="Product-images">
						<image v-if="item.mediaType === 'image'" :src="item.mediaUrl" alt="产品图片"></image>
						<video v-else-if="item.mediaType === 'video'" :src="item.mediaUrl" :controls="false" :show-center-play-btn="false" object-fit="contain"></video>
					</view>
					<view class="commodity-Name">{{ item.content }}</view>
					<view class="Store-Name">
						<view class="profile-picture-background">
							<view class="profile-picture-icon">
								<image :src="item.profilePrcture" alt="产品图片"></image>
							</view>
							<text class="profile-picture-txt">{{ item.username }}</text>
						</view>
					</view>
				</template>
			</view>
		</view>
	</view>
</template>


<script>
	export default {
		data() {
			return {
				value: '',
				list1: [{
						name: '全部'
					},
					{
						name: '用户'
					},
					{
						name: '商品'
					}
				],
				asd: [], // Store fetched data here
				currentTab: '全部', // Track the current active tab
				showIcon2: [], // Array to track visibility of icon2
				likesCount: [] // Array to track likes count for each item
			}
		},
		methods: {
			goBack() {
				uni.navigateBack({
					delta: 1 
				});
			},
			click(item) {
				this.currentTab = item.name; // Update currentTab when tab is clicked
				console.log('item', item);
			},
			handleInput(event) {
				this.value = event.detail.value;
			},
			toggleIcon(index) {
				const item = this.asd[index];
				let url = '';
				if (this.currentTab === '全部') {
					url = `/pages/index/viewAsText/viewAsText?postId=${item.postId}&mediaType=${item.mediaType}`;
				} else if (this.currentTab === '用户') {
					url = `/pages/user/userDetail?userId=${item.userId}`;
				} else if (this.currentTab === '商品') {
					url = `/pages/product/productDetail?productId=${item.productId}`;
				}
				uni.navigateTo({
					url: url
				});
			}
		},
		onLoad(options) {
			if (options.data) {
				this.asd = JSON.parse(decodeURIComponent(options.data));
				this.showIcon2 = new Array(this.asd.length).fill(false);
				this.likesCount = new Array(this.asd.length).fill(0);
			}
		}
	}
</script>


<style>
	.Search-Navigation {
		width: 100%;
		height: 100rpx;
		display: flex;
		border-bottom: 1rpx solid gainsboro;
		position: fixed;
		top: 0rpx;
		z-index: 1;
		background-color: white;
	}

	.Search-Navigation-backgeound {
		width: 100%;
		height: 100rpx;
		background-color: antiquewhite;
	}

	.return-icon {
		display: block;
		width: 65rpx;
		height: 65rpx;
		margin: 17rpx 20rpx;
		background-image: url("../../static/icon/retuen.png");
		background-repeat: no-repeat;
		background-size: cover;
	}

	.search-box {
		width: 550rpx;
		height: 70rpx;
		background-color: rgb(244, 244, 244);
		margin-top: 17rpx;
		border-radius: 30rpx;
		display: flex;
	}

	.search-icon,
	.camera-icon {
		display: block;
		width: 50rpx;
		height: 50rpx;
		margin-left: 10rpx;
		border-radius: 30rpx;
		background-image: url("../../static/icon/search.png");
		background-repeat: no-repeat;
		margin-top: 10rpx;
		background-size: cover;
	}

	.camera-icon {
		background-image: url("../../static/icon/camera.png");
	}

	.screen-background {
		width: 100%;
		height: 150rpx;
		display: flex;
		justify-content: space-between;
	}

	.classification-background {
		width: 400rpx;
		height: 150rpx;
		background-color: white;
		display: flex;
		align-items: center;
	}

	.custom-tabs {
		width: 400rpx;
		height: 80rpx;
	}

	.Specific-products-bcskground {
		width: 100%;
		background-color: #f6f6f6;
		display: flex;
		flex-wrap: wrap;
	}

	.Product-details-background {
		width: 350rpx;
		height: 800rpx;
		background-color: white;
		margin: 12rpx 12rpx;
	}

	.Product-images {
		width: 100%;
		height: 450rpx;
	}

	.Product-images image {
		width: 100%;
		height: 450rpx;
	}

	.Product-images video {
		width: 100%;
		height: 450rpx;
	}

	.commodity-Name {
		width: 300rpx;
		height: 100rpx;
		margin: 20rpx 20rpx;
	}

	.commodity-price {
		display: block;
		width: 170rpx;
		height: 60rpx;
		margin: 20rpx 20rpx;
		line-height: 60rpx;
	}

	.Store-Name {
		width: 300rpx;
		height: 80rpx;
		margin: 20rpx 20rpx;
		font-size: 30rpx;
		color: black;
		display: flex;
		line-height: 80rpx;
		overflow: hidden;
		align-items: center;
	}

	.Store-icon {
		width: 40rpx;
		height: 40rpx;
		background-image: url("../../static/Myimg/right.png");
		background-repeat: no-repeat;
		background-size: cover;
	}

	.Store-Name-txt {
		display: block;
		width: 230rpx;
		height: 40rpx;
		line-height: 40rpx;
		flex-wrap: nowrap;
		overflow: hidden;
	}

	.screen02-background {
		width: 200rpx;
		height: 150rpx;
		text-align: center;
		line-height: 150rpx;
	}

	.profile-picture-background {
		width: 170rpx;
		height: 100rpx;
		display: flex;
		align-items: center;
	}

	.profile-picture-icon {
		width: 50rpx;
		height: 50rpx;

	}

	.profile-picture-icon image {
		width: 50rpx;
		height: 50rpx;
	}

	.profile-picture-txt {
		display: block;
		width: 120rpx;
		height: 70rpx;

	}
</style>